<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    margin: 0;
    overflow: hidden;
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
  }
  
  .sakura {
    position: absolute;
    width: 15px;
    height: 15px;
    background: pink;
    border-radius: 50%;
    pointer-events: none;
  }
  
  .centered-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: pink;
  }
</style>
</head>
<body>
<div class="centered-text">
  如果樱花下落的速度是每秒5cm，那么两颗心多久才能靠近。
</div>
<script>
  const numberOfPetals = 50;

  for (let i = 0;i<numberOfPetals; i++) {
    createSakura();
  }

  function createSakura() {
    const sakura = document.createElement('div');
    sakura.className = 'sakura';
    document.body.appendChild(sakura);

    const startX = Math.random() * window.innerWidth;
    const startY = -10;
    const endX = startX + Math.random() * 10 - 5;
    const endY = window.innerHeight + 10;
    const duration = Math.random() * 5 + 5;

    sakura.style.left = startX + 'px';
    sakura.style.top = startY + 'px';

    sakura.style.transition = `transform ${duration}s linear, opacity ${duration}s linear`;

    sakura.addEventListener('transitionend', () => {
      sakura.style.left = Math.random() * window.innerWidth + 'px';
      sakura.style.top = '-10px';
      sakura.style.opacity = '1';
      requestAnimationFrame(() => {
        sakura.style.transform = `translate(${endX - startX}px, ${endY - startY}px)`;
      });
    });

    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        sakura.style.transform = `translate(${endX - startX}px, ${endY - startY}px)`;
        sakura.style.opacity = '0';
      });
    });
  }
</script>

    <form method="POST">
        姓名：<input type="text" name="myname" value="输入姓名"><br/>
        密码：<input type="text" name="mypass" value=""><br/>

        <input type="submit" value="submit"><br/>
    </form>
</body>
</html>
